<template>
  <div class="lingyang">
    <div class="daohan">
      <ul class="zlei">
        <!-- <li v-for="item in daohan"
            :key="item.id"
            :class="active==item.id?'title active':'title'"
            @click="ly_click(item.id,item.path)">{{ item.title }}</li> -->
        <li>热门筛选:</li>
        <li>
          <span>种&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类:</span>
          <el-tree-select v-model="value"
                          :data="data"
                          :render-after-expand="false"
                          style="width: 120px" />
        </li>
        <li>
          <span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
          <el-tree-select v-model="value1"
                          :data="data1"
                          :render-after-expand="false"
                          style="width: 120px" />
        </li>
        <li>
          <span>是否绝育:</span>
          <el-tree-select v-model="value2"
                          :data="data2"
                          :render-after-expand="false"
                          style="width: 120px" />
        </li>
        <li class="anniu">
          <el-button type="success"
                     round
                     @click="shaixuan()">筛选</el-button>
          <el-button type="info"
                     round
                     @click="chongzhi()">重置</el-button>
        </li>
      </ul>
    </div>
    <div class="ly_liebiao">
      <el-scrollbar height="760px">
        <LyList :lists="datalist"></LyList>
      </el-scrollbar>
    </div>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'
import axios from '@/axios'
import LyList from '@/components/liebiao/LyList.vue'
export default {
  components: {
    LyList
  },
  setup() {
    let value = ref('1')
    let value1 = ref('1')
    let value2 = ref('1')
    const data = [
      {
        value: '1',
        label: '全部'
      },
      {
        value: '2',
        label: '狗狗'
      },
      {
        value: '3',
        label: '猫咪'
      }
    ]
    const data1 = [
      {
        value: '1',
        label: '全部'
      },
      {
        value: '2',
        label: '公'
      },
      {
        value: '3',
        label: '母'
      }
    ]
    const data2 = [
      {
        value: '1',
        label: '全部'
      },
      {
        value: '2',
        label: '是'
      },
      {
        value: '3',
        label: '否'
      }
    ]
    //获取数据
    let lists = ref([])
    let datalist = ref([])
    //筛选
    const shaixuan = () => {
      if (value.value === '1' && value1.value === '1' && value2.value === '1') {
        datalist.value = lists.value
      } else if (value.value === '2' && value1.value === '1' && value2.value === '1') {
        datalist.value = lists.value.filter((option) => option.breed === '狗狗')
      } else if (value.value === '3' && value1.value === '1' && value2.value === '1') {
        datalist.value = lists.value.filter((option) => option.breed === '猫咪')
      } else if (value.value === '1' && value1.value === '2' && value2.value === '1') {
        datalist.value = lists.value.filter((option) => option.gender === '公')
      } else if (value.value === '1' && value1.value === '3' && value2.value === '1') {
        datalist.value = lists.value.filter((option) => option.gender === '母')
      } else if (value.value === '2' && value1.value === '2' && value2.value === '1') {
        datalist.value = lists.value.filter(
          (option) => option.breed === '狗狗' && option.gender === '公'
        )
      } else if (value.value === '2' && value1.value === '3' && value2.value === '1') {
        datalist.value = lists.value.filter(
          (option) => option.breed === '狗狗' && option.gender === '母'
        )
      } else if (value.value === '3' && value1.value === '2' && value2.value === '1') {
        datalist.value = lists.value.filter(
          (option) => option.breed === '猫咪' && option.gender === '公'
        )
      } else if (value.value === '3' && value1.value === '3' && value2.value === '1') {
        datalist.value = lists.value.filter(
          (option) => option.breed === '猫咪' && option.gender === '母'
        )
      } else if (value.value === '1' && value1.value === '1' && value2.value === '2') {
        datalist.value = lists.value.filter((option) => option.sterilization === '是')
      } else if (value.value === '2' && value1.value === '1' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) => option.breed === '狗狗' && option.sterilization === '是'
        )
      } else if (value.value === '3' && value1.value === '1' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) => option.breed === '猫咪' && option.sterilization === '是'
        )
      } else if (value.value === '1' && value1.value === '2' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) => option.gender === '公' && option.sterilization === '是'
        )
      } else if (value.value === '1' && value1.value === '3' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) => option.gender === '母' && option.sterilization === '是'
        )
      } else if (value.value === '2' && value1.value === '2' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '狗狗' && option.gender === '公' && option.sterilization === '是'
        )
      } else if (value.value === '2' && value1.value === '2' && value2.value === '3') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '狗狗' && option.gender === '公' && option.sterilization === '否'
        )
      } else if (value.value === '2' && value1.value === '3' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '狗狗' && option.gender === '母' && option.sterilization === '是'
        )
      } else if (value.value === '2' && value1.value === '3' && value2.value === '3') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '狗狗' && option.gender === '母' && option.sterilization === '否'
        )
      } else if (value.value === '3' && value1.value === '2' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '猫咪' && option.gender === '公' && option.sterilization === '是'
        )
      } else if (value.value === '3' && value1.value === '2' && value2.value === '3') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '猫咪' && option.gender === '公' && option.sterilization === '否'
        )
      } else if (value.value === '3' && value1.value === '3' && value2.value === '2') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '猫咪' && option.gender === '母' && option.sterilization === '是'
        )
      } else if (value.value === '3' && value1.value === '3' && value2.value === '3') {
        datalist.value = lists.value.filter(
          (option) =>
            option.breed === '猫咪' && option.gender === '母' && option.sterilization === '否'
        )
      }
      // console.log(datalist.value)
    }
    //重置
    const chongzhi = () => {
      value.value = '1'
      value1.value = '1'
      value2.value = '1'
      datalist.value = lists.value
    }

    onMounted(() => {
      //获取领养列表
      axios
        .get('/lingyanglist')
        .then((d) => {
          // console.log(d)
          lists.value = d.filter((item) => item.status === '待领养')
          datalist.value = lists.value
        })
        .catch((err) => console.log(err))
    })

    return {
      data,
      data1,
      data2,
      value,
      value1,
      value2,
      shaixuan,
      chongzhi,
      lists,
      datalist
    }
  }
}
</script>

<style scoped lang="less">
.lingyang {
  width: 1200px;
  // height: 100%;
  // padding: 30px;
  margin: 0 auto;
  display: flex;
  .daohan {
    width: 200px;
    height: 270px;
    border-radius: 10% 10%;
    border-bottom: #f5dfe5 2px solid;
    border-left: #f5dfe5 2px solid;
    border-right: #f5dfe5 2px dashed;
    border-top: #f5dfe5 2px dashed;
    .zlei {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .anniu {
        button {
          width: 80px;
          margin: 0 10px;
        }
      }
    }
  }
}
</style>

